<template>
	<basic-container>
		<avue-crud :option="option" :data="data" :page="page" ref="crud" v-model="form" @row-del="rowDel" @row-update="rowUpdate"
		 :before-open="beforeOpen" @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset"
		 @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" @on-load="onLoad">
			<template slot-scope="scope" slot="menu">
				<el-button type="text" size="small" icon="el-icon-setting" @click.stop="handleRole(scope.row)">菜单</el-button>
			</template>
		</avue-crud>
		<el-drawer title="角色配置" :visible.sync="box" :destroy-on-close="true" direction="rtl" size="50%" :modal-append-to-body='false'>
			<el-container>
				<el-main :style="{height:screenHeight}">
					<el-tree :data="list" show-checkbox node-key="id" accordion ref="tree" :default-expanded-keys="defaultObj"
					 :default-checked-keys="defaultObj" :props="props">
						<span class="custom-tree-node" slot-scope="{ node, data }">
							<span>{{ node.label }}</span>
							<span>
								<el-checkbox v-for="item in buttonList.filter(m=>m.menuId==data.id)" v-model="btns[item.id]" :checked="defaultObj.indexOf(item.id)>-1"
								 :label="item.name" :key="item.id">{{item.name}}</el-checkbox>
							</span>
						</span>
					</el-tree>
				</el-main>
				<el-footer style="margin-top: 10px;">
					<el-button size="mini" @click="box = false">取 消</el-button>
					<el-button type="primary" size="mini" @click="submit">确 定</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</basic-container>
</template>

<script>
	import request from '@/router/axios';

	import {
		getList,
		remove,
		update,
		add,
		grant,
		grantTree,
		getRole,
		buttonList
	} from "@/api/system/role";
	import roleEdit from './roleEdit';

	export default {
		components: {
			roleEdit
		},
		data() {
			return {
				screenHeight: (document.documentElement.clientHeight - 150) + 'px',
				btns: {},
				isEdit: false,
				form: {},
				box: false,
				rowid: '',
				props: {
					label: "name",
					value: "id"
				},
				list: [],
				buttonList: [],
				defaultObj: [],
				selectionList: [],
				query: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				option: {
					searchMenuSpan: 4,
					tip: false,
					tree: true,
					border: true,
					index: true,
					menuWidth: 200,
					column: [{
							label: "角色名称",
							prop: "name",
							search: true,
							rules: [{
								required: true,
								message: "请输入角色名称",
								trigger: "blur"
							}]
						}, {
							label: "接口权限",
							prop: "code",
							type: "select",
							filterable: true,
							dicData: [],
							props: {
								label: "name",
								value: "code"
							},
							rules: [{
								required: true,
								trigger: "blur"
							}]
						},
						{
							label: "相关人员",
							prop: "users",
							type: "select",
							hide:true,
							filterable: true,
							multiple: true,
							dicData: [],
							span: 24,
							props: {
								label: "trueName",
								value: "id"
							}
						},
						{
							label: "数据权限",
							prop: "datas",
							span: 24,
							type: "radio",
							dicData: [{
									label: "本人",
									value: "1"
								},
								{
									label: "本部门",
									value: "2"
								},
								{
									label: "下属部门",
									value: "3"
								},
								{
									label: "全部",
									value: "9"
								}
							]
						},
						{
							label: "备注",
							prop: "remark",
							span: 24
						}
					]
				},
				data: []
			};
		},
		created() {
			request({
				url: '/api/code/getCodes',
				params: {
					typeId: 'CODE200902'
				}
			}).then(res => {
				this.findObject(this.option.column, 'code').dicData = res.data.data;
			});
			request({
				url: '/api/user/getpages',
				params: {
					limit: 0
				}
			}).then(res => {
				this.findObject(this.option.column, 'users').dicData = res.data.data;
			});
		},
		computed: {
			ids() {
				let ids = [];
				this.selectionList.forEach(ele => {
					ids.push(ele.id);
				});
				return ids.join(",");
			}
		},
		methods: {
			closeMoule() {
				this.dialogShow = false;
				this.onLoad(this.page);
			},
			beforeOpen(done, type) {
				if (type == "edit") {
					request({
						url: '/api/Role/getmodel',
						params: {
							id: this.form.id
						}
					}).then(res => {
						this.form = res.data.data;
					});
				}
				done()
			},
			submit() {
				var menuList = this.$refs.tree.getCheckedKeys().join(',');
				for (var j = 0; j < this.buttonList.length; j++) {
					var bid = this.buttonList[j].id;
					var obj = this.btns[bid];
					if (obj != undefined && obj) {
						menuList += ',' + bid
					}
				}
				grant(this.rowid, menuList).then(() => {
					this.box = false;
					this.onLoad(this.page);
				});
			},
			rowSave(row, loading, done) {
				add(row).then(() => {
					loading();
					this.onLoad(this.page);
				}, error => {
					done();
					console.log(error);
				});
			},
			rowUpdate(row, index, loading, done) {
				//console.log(1,row)
				update(row).then(() => {
					this.onLoad(this.page);
					loading();
				}, error => {
					done();
					console.log(error);
				});
			},
			rowDel(row) {
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					}).then(() => {
						return remove(row.id);
					})
					.then(() => {
						this.onLoad(this.page);
					}).catch(() => {});
			},

			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.query = params;
				this.onLoad(this.page, params);
				done();
			},
			selectionChange(list) {
				this.selectionList = list;
			},
			handleRole(row) {
				this.buttonList = [];
				this.btns = {};
				this.list = [];
				this.defaultObj = [];
				this.rowid = row.id;
				grantTree().then(res => {
					this.list = res.data.data;
					getRole(row.id).then(res => {
						this.defaultObj = res.data.data;
						this.box = true;
						buttonList().then(res => {
							this.buttonList = res.data.data;
							// console.log(this.btns)
							// for(var j = 0; j < this.buttonList.length; j++) {
							//   var bid = this.buttonList[j].id;
							//   if (this.defaultObj.indexOf(bid)>-1)
							//   {
							//     this.btns[bid] = true;
							//   }
							// }
							// console.log(this.btns)
						})
					})
				});
			},
			handleDelete() {
				if (this.selectionList.length === 0) {
					this.$message.warning("请选择至少一条数据");
					return;
				}
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return remove(this.ids);
					})
					.then(() => {
						this.onLoad(this.page);
						this.$refs.crud.toggleSelection();
					}).catch(() => {});
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page, params = {}) {
				getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
					const data = res.data
					this.data = data.data;
					this.page.total = data.remark;
				});
			}
		}
	};
</script>

<style>
	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}
</style>
